<template>
  <div class="seeAllrecord">
    <!-- 查看全部记录 -->
    <div class="showBanner" style="background: white;padding: 16px;border-bottom: none;padding-left: 30px">
      查看全部记录
    </div>
    <div class="usermessage">
      <div class="userPhoto">
        <img src="" alt="">
      </div>
      <span>{{name}}</span>
      <span>{{mobile}}</span>
    </div>
    <div class="padding-box">
      <el-tabs type="card" v-model="activeTab">
        <el-tab-pane label="全部记录" name="1">
          <recordList listType="1" v-if="activeTab === '1'"></recordList>
        </el-tab-pane>
        <el-tab-pane label="已付款" name="2">
          <recordList listType="2" v-if="activeTab === '2'"></recordList>
        </el-tab-pane>
        <el-tab-pane label="未付款" name="3">
          <recordList listType="3" v-if="activeTab === '3'"></recordList>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="4">
          <recordList listType="4" v-if="activeTab === '4'"></recordList>
        </el-tab-pane>
        <el-tab-pane label="充值记录" name="5">
          <recordList listType="5" v-if="activeTab === '5'"></recordList>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import recordList from './recordList'

export default {
  name: 'seeAllrecord',
  components: {
    recordList
  },
  data() {
    return {
      name: '张三',
      mobile: '123321',
      activeTab: '1'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.seeAllrecord
  .usermessage
    height 70px
    .userPhoto
      border-radius 50%
      width 60px
      height 60px
      border 1px green solid
    span
      margin-left 20px

</style>
